<template>
  <div class="manage-container">
    <div class="pa-mb-1">
      <!-- <el-radio-group v-model="queryParams.withCodeStatus" @change="search">
        <el-radio-button :label="0">有码项目</el-radio-button>
        <el-radio-button :label="1">无码项目</el-radio-button>
      </el-radio-group>-->
      <div class="head-filter pa-flex-center">
        <div
          v-for="(item, index) in tabs"
          :key="index"
          @click="handleTab(item)"
          :class="queryParams.withCodeStatus == item.value ? 'checked' : ''"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="search">
      项目名称
      <el-input
        v-model="queryParams.projectName"
        placeholder="项目名称"
        class="input"
      ></el-input
      >时间
      <el-date-picker
        v-model="queryParams.startTime"
        type="date"
        placeholder="选择日期"
        prefix-icon="none"
        value-format="yyyy-MM-dd"
        @change="search"
      ></el-date-picker
      >-
      <el-date-picker
        v-model="queryParams.endTime"
        type="date"
        placeholder="选择日期"
        prefix-icon="none"
        value-format="yyyy-MM-dd"
        @change="search"
      ></el-date-picker>

      <el-button class="search-button" @click="search">搜索</el-button>
      <el-button class="search-button" @click="addFlag = true">添加</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="projectName"
        label="项目名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="userName"
        label="用户姓名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="contactInformation"
        label="联系方式"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="content"
        label="用户咨询描述"
        align="center"
      ></el-table-column>
      <el-table-column prop="date" label="操作" align="center">
        <div slot-scope="scoped">
          <span class="show" @click="handleShow(scoped.row)">查看</span>
        </div>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 查看详情 -->
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="666px"
      :before-close="handleClose"
    >
      <div class="dialogContent">
        <table>
    <tr>
      <td class="_label">时间</td>
      <td class="_value" colspan="4">{{ dialogData.createTime }}</td>
    </tr>
    <tr>
      <td class="_label">项目名称</td>
      <td class="_value" colspan="4">{{ dialogData.projectName }}</td>
    </tr>
    <tr>
      <td class="_label">联系人</td>
      <td class="_value" colspan="4">{{ dialogData.userName }}</td>
    </tr>
    <tr>
      <td class="_label">联系方式</td>
      <td class="_value" colspan="4">{{ dialogData.contactInformation }}</td>
    </tr>
    <tr>
      <td class="_label">用户咨询描述</td>
      <td class="_value" colspan="4">{{ dialogData.content }}</td>
    </tr>
    <tr>
      <td class="_label">帮办员回复内容</td>
      <td class="_value" colspan="4">{{ dialogData.replyContent }}</td>
    </tr>
    </table>

      </div>
      <div class="pa-text-rt">
        <el-button type="primary" size="small" @click="handleClose"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加 -->
    <WorkAdd
      :dialog-visible.sync="addFlag"
      @refresh="search"
      :type="queryParams.withCodeStatus"
    ></WorkAdd>
  </div>
</template>
<script>
import { listApi, detailApi } from "@/api/workApi";
import WorkAdd from "./add.vue";
export default {
  components: {
    WorkAdd
  },
  data() {
    return {
      tabs: [
        {
          label: "有码项目",
          value: 0
        },
        {
          label: "无码项目",
          value: 1
        }
      ],
      date: "",
      addFlag: false,
      dialogVisible: false,
      dialogData: {},
      loading: false,
      tableData: [],
      queryParams: {
        projectName: "", //项目名称
        withCodeStatus: 0, //0有码1无码
        startTime: "", //开始时间
        endTime: "", //结束时间
        current: 1,
        size: 1
      },
      total: 0
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    search() {
      this.queryParams.current = 1;
      this.getList();
    },
    async getList() {
      try {
        this.loading = true;
        if (this.queryParams.startTime == null) {
          this.queryParams.startTime = "";
        }
        if (this.queryParams.endTime == null) {
          this.queryParams.endTime = "";
        }
        const res = await listApi(this.queryParams);
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
    async handleShow(row) {
      this.dialogData = row;
      // const res = await detailApi({ id: row.id })
      // this.dialogData = res.data
      this.dialogVisible = true;
    },
    handleTab(item) {
      this.queryParams.withCodeStatus = item.value;
      this.search();
    },
    handleCurrentChange(current) {
      this.queryParams.current = current;
      this.getList();
    },
    handleSizeChange(size) {
      this.queryParams.size = size;
      this.getList();
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.manage-container {
  .head-filter {
    width: 353px;
    height: 62px;
    background: #dfe9ff;
    border-radius: 31px;
    margin-bottom: 32px;

    div {
      width: 164px;
      height: 46px;
      text-align: center;
      line-height: 46px;
      cursor: pointer;
    }

    .checked {
      background: #3d78ff;
      border-radius: 23px;
      color: #fff;
    }
  }

  .search {
    margin-bottom: 30px;

    .input {
      width: 215px;
      height: 48px;
      box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
      border-radius: 14px;
      margin-left: 16px;
    }

    .search-button {
      width: 90px;
      height: 41px;
      background: #4880ff;
      border-radius: 5px;
      margin-left: 24px;
      color: #fff;
    }
  }

  :deep(.show) {
    color: #3f8cff;
    cursor: pointer;
  }

  :deep(.dialogContent) {
    padding: 36px 0 98px 0;
    font-size: 16px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #333333;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }
}
@media (min-width: 1280px) {
  .el-date-editor.el-input,
  .input {
    width: 182px !important;
    box-sizing: border-box;
    margin-right: 10px;
  }
}
table {
  width: 100%;
  border-collapse: collapse;
  td {
    font-size: 14px;
    padding: 15px;
    font-weight: 600;
  }
  ._label {
    width: 30%;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    background-color: #f6f6f6;
  }
  ._value {
    font-weight: normal;
    text-align: left;
  }
}
table,
th,
td {
  border: 1px solid #bed0d3;
}
</style>
